import React, { Component } from 'react'
import '../../App.css'

// 类组件
export default class A extends Component {

    render() {
        return (
            <div>
                <h2>我是A组件</h2>
                {/* <B>对对对</B> */}

                {/* <B>
                    <C></C>
                </B> */}

                <B aa={(age) => <D age={age} />} render={(name) => <C name={name} />} />
            </div>
        )
    }
}
class B extends Component {
    state = { name: 'tom',age:'18' }
    render() {
        console.log('B：', this.props);
        return (
            <div className="b">
                <h2>我是B组件</h2>
                {/* <C></C> */}
                {/* {this.props.children} */}

                {/* 相当于Vue的插槽 */}
                {this.props.aa(this.state.age)}
                {this.props.render(this.state.name)}
            </div>
        )
    }
}
class C extends Component {
    render() {
        return (
            <div className="c">
                <h2>我是C组件---接收B传递的值：{this.props.name}</h2>
            </div>
        )
    }
}

class D extends Component {
    render() {
        return (
            <div className="d">
                <h2>我是D组件---接收B传递的值：{this.props.age}</h2>
            </div>
        )
    }
}

